<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			/*顶部样式*/
			.top_context{
				height: 200px;
				background-color: #e0e0e0;
				text-align: center;
				line-height: 200px;
			}
			/*吸顶灯内容元素初始效果*/
			.sticky_element{
				height: 50px;
				background-color: #333;
				color: #fff;
				text-align: center;
				line-height: 50px;
			}
			/*页面主体区域*/
			.main_context{
				height: 8000px;
				background-color: #e0e0e0;
			}
			/*切换样式：吸顶灯卡页面顶部*/
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="jquery-1.11.1(1).js"></script>
		<script>
			//ready()事件源语法： $(document).ready(function(){});
		    //            简写：$(function(){});
			//  总结：页面元素全部加载完毕，在执行JQ相关操作
			//  script元素放在最后一个body位置【可不写】
			$(function(){
		
			//固定值：页面顶部到吸顶灯位置--BOM语法
			//offset()   获取或者设置元素相对于文档偏移量
			//offset().top  从顶部到吸顶灯元素的偏移量
			var se=$(".sticky_element").offset().top;
			
			//滚动值：BOM对象+事件源 
			//$(window) 抓取页面window对象，监听窗口事件：窗口改变、滚动
			//理解：实时抓取页面滚动值
			$(window).scroll(function(){
				//alert("测试是否滚动~~")
				//滚动值：获取页面滚动位置
				//scrollTop()获取页面滚动垂直距离
				var st= $(window).scrollTop();
				
				//判断  "滚动值大于固定值"，滚动超过200，实现切换：吸顶效果
				if(st>se){
					//条件成立：大于200px  切换吸顶效果
					$(".sticky_element").addClass("sticky");
				}else{
					//条件不成立：小于200px 
					 $(".sticky_element").removeClass("sticky");
				}
			});
			});
		</script>
	</head>
	<body>
		<!-- 顶部内容：导航 -->
		<div class="top_context">顶部内容区域</div>
		<!-- 吸顶灯内容 -->
		<div class="sticky_element">我是吸顶元素</div>
		<!-- 页面主体内容 -->
		<div class="main_context">
		你认真地说你喜欢白山茶
		你认真地说~哦哦哦哦哦哦哦哦
		咦咦咦咦诶你会送给别的红玫瑰
		你温柔地说哦哦哦哦哦哦哦哦哦
		迫不及待地爱别人嗯嗯嗯嗯
		你给我的感觉总是患得患失
		就像寒夜里那冰冷的雨滴️️
		一次次地猜疑
		我失去了你
		你认真地说你喜欢白山茶
		你认真地说~哦哦哦哦哦哦哦哦
		咦咦咦咦诶你会送给别的红玫瑰
		你温柔地说哦哦哦哦哦哦哦哦哦
		迫不及待地爱别人嗯嗯嗯嗯
		你给我的感觉总是患得患失
		就像寒夜里那冰冷的雨滴️️
		一次次地猜疑
		我失去了你
		你认真地说你喜欢白山茶
		你认真地说~哦哦哦哦哦哦哦哦
		咦咦咦咦诶你会送给别的红玫瑰
		你温柔地说哦哦哦哦哦哦哦哦哦
		迫不及待地爱别人嗯嗯嗯嗯
		你给我的感觉总是患得患失
		就像寒夜里那冰冷的雨滴️️
		一次次地猜疑
		我失去了你
		你认真地说你喜欢白山茶
		你认真地说~哦哦哦哦哦哦哦哦
		咦咦咦咦诶你会送给别的红玫瑰
		你温柔地说哦哦哦哦哦哦哦哦哦
		迫不及待地爱别人嗯嗯嗯嗯
		你给我的感觉总是患得患失
		就像寒夜里那冰冷的雨滴️️
		一次次地猜疑
		我失去了你
		</div>
		<script>
			//ready（）事件源语法：$(document).ready(function(){});
			//               简写：$(function(){});
			//总结：页面元素全部添加完毕，在执行JQ相关操作
			//script元素放在最后一个body位置上【可不写】
			/* 吸顶灯效果----bom案例、浏览器6个对象的使用方法
			 思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
			       2.页面顶部吸顶灯位置 200px，大于200px
				   3.追加第一个样式：固定顶位 页面顶部位置
				   
				   1.追加样式：吸顶灯卡在页面顶部
				   2.固定值：页面顶部到吸顶灯位置 ---bom位置
				   3.固定值> 滚动值 超出200，实现切换
				   offset() 获取或者设置元素相对于文档偏移量
				   offset()。top 从顶部到*/
				   /*滚动值：Bom对象+事件源
				   ￥（window）抓取页面window对象，监听窗口时间：窗口改变 滚动时触发
				    理解：实时抓取页面滚动值*/
			// $(".sticky_element").offset().top;
					//滚动值：获取页面滚动位置
					//scrollTop(()获取页面滚动垂直距离
					
			//鼠标移动到顶部内容区域--弹出文本：我是顶部元素
			//$("#top_context").mouseenter(function(){
			//BOM形式输出：浏览器弹窗输出文本效果
			//alert("我是顶部元素");
					// ready()事件源写法：$(document).ready(function(){});
					// 简写:$(function(){});
					// 总结：页面全部加载完毕,再执行JQ相关操作
					// script元素放在最后一个body位置【可不写】
					$(function(){
						// 固定值：页面顶部到吸顶灯位置--BOM语法
						// offset()		获取或者设置元素相对于文档的偏移量
						// offset().top	从顶部到吸顶灯元素的偏移量
						var se=$(".sticky_element").offset().top;
						
						// 滚动值：BOM对象+事件源，实现功能：当元素的滚动条，滚动时触发
						// 滚动值：BOM对象+事件源
						// $(window)抓取页面window对象，监听窗口事件：窗口改变、滚动
						// 理解：实时抓取页面滚动值
						$(window).scroll(function(){
							var st=$(window).scrollTop();
							
							// 判断	固定值大于滚动值，滚动超过200，实现切换：吸顶效果
							if(st>se){
								// 条件成立：大于200px，切换吸顶效果
								$(".sticky_element").addClass("sticky");
								}else{
								// 条件不成立：小于200px
								$(".sticky_element").removeClass("sticky")
								}
						});
						// 滚动值：获取页面滚动位置
						// scrollTop()获取页面滚动垂直距离
					});
				</script>
	</body>
</html>